a {
  text-decoration: none;
}
p {
  margin: 0;
}
i {
  font-style: normal;
}
ul {
  list-style: none;
}
h4,body,ul, h3 {
  margin: 0;
  padding: 0!important;
}


/*弹性布局*/
.flex {
  display: flex;

  &-1 {
    flex: 1;
  }

  &-dir {
    flex-direction: column;

    &-r {
      flex-direction: row;
    }
  }

  &-js {
    &-c {
      justify-content: center;
    }

    &-a {
      justify-content: space-around;
    }

    &-b {
      justify-content: space-between;
    }

    &-e {
      justify-content: space-evenly;
    }

    &-ed {
      justify-content: end;
    }
  }

  &-ai {
    &-s {
      align-items: start;
    }
    &-c {
      align-items: center;
    }
  }
  &-wrap {
    flex-wrap: wrap;
  }
}

/*定位布局*/
.position {
  &-absolute {
    position: absolute;
  }
  &-relative {
    position: relative;
  }
  &-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  &-y-center {
    top: 50%;
    transform: translateY(-50%);
  }
  &-x-center {
    left: 50%;
    transform: translateX(-50%);
  }
}

/*字体样式*/
.font {
  &-hover {
    transition: color .2s;
    &:hover {
      color: #93d4fa;
    }
  }
  &-size {
    &-s {
      font-size: $-pc-font-size-s;
    }
    &-sm {
      font-size: $-pc-font-size-sm;
    }
    &-smm {
      font-size: $-pc-font-size-smm;
    }
    &-m {
      font-size: $-pc-font-size-m;
    }
    &-l {
      font-size: $-pc-font-size-l;
    }
    &-xl {
      font-size: $-pc-font-size-xl;
    }
  }
  &-mobile-size {
    &-s {
      font-size: $-mobile-space-size-s;
    }
    &-sm {
      font-size: $-mobile-space-size-sm;
    }
    &-m {
      font-size: $-mobile-space-size-m;
    }
    &-l {
      font-size: $-mobile-space-size-l;
    }
    &-xl {
      font-size: $-mobile-space-size-xl;
    }
  }
  &-color {
    &-gray {
      &-9 {
        color: $color-gray-9;
      }
      &-f3 {
        color: $color-gray-f3;
      }
      &-f5 {
        color: $color-gray-f5;
      }
      &-e5 {
        color: $color-gray-e5;
      }
      &-c {
        color: $color-gray-c;
      }
      &-6 {
        color: $color-gray-6;
      }
    }
    &-white {
      color: $color-white;
    }
    &-error {
      color: $color-error;
    }
    &-main {
     color: $color-main;
    }
  }
  &-width {
    &-bold {
      font-weight: bold;
    }
  }
  &-center {
    text-align: center;
  }
  &-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/*元素宽高*/
.screen {
  &-height {
    height: 100%;
    &-v {
      height: 100vh;
    }
  }

  &-width {
    width: 100%;
    &-v {
      width: 100vw;
    }
  }

}
/*鼠标相关*/
.cursor {
  &-pointer {
    cursor: pointer;
  }
  &-default {
    cursor: default;
  }
}

/*背景相关*/
.bg {
  &-color {
    &-gray {
      &-9 {
        background-color: $color-gray-9;
      }
      &-f3 {
        background-color: $color-gray-f3;
      }
      &-f5 {
        background-color: $color-gray-f5;
      }
      &-e5 {
        background-color: $color-gray-e5;
      }
      &-c {
        background-color: $color-gray-c;
      }
      &-6 {
        background-color: $color-gray-6;
      }
      &-ef {
        background-color: $color-gray-ef;
      }
    }
    &-main {
      background-color: $color-main;
    }
    &-warning {
      background-color: $color-warning;
    }
    &-info {
      background-color: $color-info;
    }
    &-success {
      background-color: $color-success;
    }
    &-error {
      background-color: $color-error;
    }
  }
}

/*边框相关*/
.border {
  &-radius {
    &-all {
      &-s {
        border-radius: $round-size-s;
      }
      &-sm {
        border-radius: $round-size-sm;
      }
      &-m {
        border-radius: $round-size-m;
      }
      &-l {
        border-radius: $round-size-l;
      }
      &-xl {
        border-radius: $round-size-xl;
      }
    }
  }
}

/*margin间距值*/
.margin {
  &-top {
    &-s {
      margin-top: $-pc-space-size-s;
    }
    &-sm {
      margin-top: $-pc-space-size-sm;
    }
    &-m {
      margin-top: $-pc-space-size-m;
    }
    &-l {
      margin-top: $-pc-space-size-l;
    }
    &-xl {
      margin-top: $-pc-space-size-xl;
    }
    &-xxl {
      margin-top: $-pc-space-size-xxl;
    }
  }
  &-mobile-top {
    &-s {
      margin-top: $-mobile-space-size-s;
    }
    &-sm {
      margin-top: $-mobile-space-size-sm ;
    }
    &-m {
      margin-top: $-mobile-space-size-m;
    }
    &-l {
      margin-top: $-mobile-space-size-l;
    }
    &-xl {
      margin-top: $-mobile-space-size-xl;
    }
    &-xxl {
      margin-top: $-mobile-space-size-xxl;
    }
  }
  &-bottom {
    &-s {
      margin-bottom: $-pc-space-size-s;
    }
    &-sm {
      margin-bottom: $-pc-space-size-sm;
    }
    &-m {
      margin-bottom: $-pc-space-size-m;
    }
    &-l {
      margin-bottom: $-pc-space-size-l;
    }
    &-xl {
      margin-bottom: $-pc-space-size-xl;
    }
    &-xxl {
      margin-bottom: $-pc-space-size-xxl;
    }
  }
  &-mobile-bottom {
    &-s {
      margin-bottom: $-mobile-space-size-s;
    }
    &-sm {
      margin-bottom: $-mobile-space-size-sm;
    }
    &-m {
      margin-bottom: $-mobile-space-size-m;
    }
    &-l {
      margin-bottom: $-mobile-space-size-l;
    }
    &-xl {
      margin-bottom: $-mobile-space-size-xl;
    }
    &-xxl {
      margin-bottom: $-mobile-space-size-xxl;
    }
  }
  &-left {
    &-s {
      margin-left: $-pc-space-size-s;
    }
    &-sm {
      margin-left: $-pc-space-size-sm;
    }
    &-m {
      margin-left: $-pc-space-size-m;
    }
    &-l {
      margin-left: $-pc-space-size-l;
    }
    &-xl {
      margin-left: $-pc-space-size-xl;
    }
    &-xxl {
      margin-left: $-pc-space-size-xxl;
    }
  }
  &-mobile-left {
    &-s {
      margin-left: $-mobile-space-size-s;
    }
    &-sm {
      margin-left: $-mobile-space-size-sm;
    }
    &-m {
      margin-left: $-mobile-space-size-m;
    }
    &-l {
      margin-left: $-mobile-space-size-l;
    }
    &-xl {
      margin-left: $-mobile-space-size-xl;
    }
    &-xxl {
      margin-left: $-mobile-space-size-xxl;
    }
  }
  &-right {
    &-s {
      margin-right: $-pc-space-size-s;
    }
    &-sm {
      margin-right: $-pc-space-size-sm;
    }
    &-m {
      margin-right: $-pc-space-size-m;
    }
    &-l {
      margin-right: $-pc-space-size-l;
    }
    &-xl {
      margin-right: $-pc-space-size-xl;
    }
    &-xxl {
      margin-right: $-pc-space-size-xxl;
    }
  }
  &-mobile-right {
    &-s {
      margin-right: $-mobile-space-size-s;
    }
    &-sm {
      margin-right: $-mobile-space-size-sm;
    }
    &-m {
      margin-right: $-mobile-space-size-m;
    }
    &-l {
      margin-right: $-mobile-space-size-l;
    }
    &-xl {
      margin-right: $-mobile-space-size-xl;
    }
    &-xxl {
      margin-right: $-mobile-space-size-xxl;
    }
  }
}

/*padding间距值*/
.padding {
  &-all {
    &-s {
      padding: $-pc-space-size-s;
    }
    &-sm {
      padding: $-pc-space-size-sm;
    }
    &-m {
      padding: $-pc-space-size-m;
    }
  }
  &-mobile-all {
    &-s {
      padding: $-mobile-space-size-s;
    }
    &-sm {
      padding: $-mobile-space-size-sm;
    }
    &-m {
      padding: $-mobile-space-size-m
    }
  }
  &-top {
    &-s {
      padding-top: $-pc-space-size-s;
    }
    &-sm {
      padding-top: $-pc-space-size-sm ;
    }
    &-m {
      padding-top: $-pc-space-size-m;
    }
    &-l {
      padding-top: $-pc-space-size-l;
    }
    &-xl {
      padding-top: $-pc-space-size-xl;
    }
    &-xxl {
      padding-top: $-pc-space-size-xxl;
    }
  }
  &-mobile-top {
    &-s {
      padding-top: $-mobile-space-size-s;
    }
    &-sm {
      padding-top: $-mobile-space-size-sm ;
    }
    &-m {
      padding-top: $-mobile-space-size-m;
    }
    &-l {
      padding-top: $-mobile-space-size-l;
    }
    &-xl {
      padding-top: $-mobile-space-size-xl;
    }
    &-xxl {
      padding-top: $-mobile-space-size-xxl;
    }
  }
  &-right {
    &-s {
      padding-right: $-pc-space-size-s;
    }
    &-sm {
      padding-right: $-pc-space-size-sm;
    }
    &-m {
      padding-right: $-pc-space-size-m;
    }
    &-l {
      padding-right: $-pc-space-size-l;
    }
    &-xl {
      padding-right: $-pc-space-size-xl;
    }
  }
  &-mobile-right {
    &-s {
      padding-right: $-mobile-space-size-s;
    }
    &-sm {
      padding-right: $-mobile-space-size-sm;
    }
    &-m {
      padding-right: $-mobile-space-size-m;
    }
    &-l {
      padding-right: $-mobile-space-size-l;
    }
    &-xl {
      padding-right: $-mobile-space-size-xl;
    }
  }
  &-left {
    &-s {
      padding-left: $-pc-space-size-s;
    }
    &-sm {
      padding-left: $-pc-space-size-sm;
    }
    &-m {
      padding-left: $-pc-space-size-m;
    }
    &-l {
      padding-left: $-pc-space-size-l;
    }
    &-xl {
      padding-left: $-pc-space-size-xl;
    }
  }
  &-mobile-left {
    &-s {
      padding-left: $-mobile-space-size-s;
    }
    &-sm {
      padding-left: $-mobile-space-size-sm;
    }
    &-m {
      padding-left: $-mobile-space-size-m;
    }
    &-l {
      padding-left: $-mobile-space-size-l;
    }
    &-xl {
      padding-left: $-mobile-space-size-xl;
    }
  }
  &-bottom {
    &-s {
      padding-bottom: $-pc-space-size-s;
    }
    &-sm {
      padding-bottom: $-pc-space-size-sm ;
    }
    &-m {
      padding-bottom: $-pc-space-size-m;
    }
    &-l {
      padding-bottom: $-pc-space-size-l;
    }
    &-xl {
      padding-bottom: $-pc-space-size-xl;
    }
  }
  &-mobile-bottom {
    &-s {
      padding-bottom: $-mobile-space-size-s;
    }
    &-sm {
      padding-bottom: $-mobile-space-size-sm;
    }
    &-m {
      padding-bottom: $-mobile-space-size-m;
    }
    &-l {
      padding-bottom: $-mobile-space-size-l;
    }
    &-xl {
      padding-bottom: $-mobile-space-size-xl;
    }
  }
}

/*页面溢出处理*/
.overflow {
  &-hidden {
    overflow: hidden;
  }
  &-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

///*规定屏幕隐藏*/
@each $screen, $size in $screen-list {
  @media screen and (max-device-width: $size) {
    .screen-hidden-#{ $screen } {
      display: none;
    }
  }
}

@each $screen, $size in $screen-list {
  @media screen and (min-device-width: $size) {
    .screen-show-#{ $screen } {
      display: none;
    }
  }
}

img {
  vertical-align: middle;
}